<template>
	<view>
		<view class="bg-white">
			<u-dropdown>
				<u-dropdown-item @change="dropdown1Change" :value="dropItem.item1.curr.value"
					:title="dropItem.item1.curr.label" :options="dropItem.item1.list"></u-dropdown-item>
				<u-dropdown-item @change="dropdown2Change" :value="dropItem.item2.curr.value"
					:title="dropItem.item2.curr.label" :options="dropItem.item2.list"></u-dropdown-item>
			</u-dropdown>
		</view>

		<five-level-address style="margin-top: 10rpx;" @input="clearList();loadAgentList(null)"
			v-model="fiveLevelAddress"></five-level-address>

		<view class="mt10 bg-white row page-center">
			<view class="mt20 mb20 row-between flex1">
				<view style="color: #666;">
					<u-icon name="map"></u-icon>
					<text class="ml10">{{location.cityname}}</text>
				</view>
				<view style="color: var(--primary-color);" @tap="resetLocation()">
					<u-icon name="reload"></u-icon>
					<text class="ml5">刷新</text>
				</view>
			</view>
		</view>

		<view class="page-center">
			<view class="list-item mt20 bg-white" v-for="item in agentList" :key="item.id" @click="checked(item)"
				:class="{'active':curr_agent.id==item.id}">
				<view class="row">
					<img :src="item.logo" mode="aspectFill" class="img mr20" />
					<view class="text-box">
						<view class="row">
							<text class="xl mr20">{{item.name}}</text>
							<u-tag :text="item.leixin_name" type="success" />
						</view>
						<text class="md">{{item.address}}</text>
						<view class="sm muted" style="display: flex;gap: 20rpx;">
							<text v-if="item.lease_stock">库存：{{item.lease_stock}}</text>
							<text style="color:#FF2100" v-if="item.lease_stock<=0">需预约</text>

							<text>已租赁：{{item.num || 0}}次</text>
						</view>
						<text style="color: var(--primary-color);">{{item.juli}}</text>
					</view>
				</view>
				<view class="row-between mt20">
					<view>
						<text style="color: #999;" class="mr10">订单总数</text>
						<text>{{item.order_num}}</text>
					</view>
					<u-button shape="circle" size="mini" type="primary" @click.stop="checked(item)" :throttleTime="0"
						:plain="curr_agent.id!=item.id">{{curr_agent.id==item.id ? '已选择' : '选择'}}</u-button>
				</view>
			</view>
		</view>

		<!-- loading页脚 -->
		<loading-footer :status="status"></loading-footer>
	</view>
</template>

<script>
	import {
		getAgentList,
		getCountyList
	} from '@/api/lease.js'
	import {
		loadingFun
	} from '@/utils/tools';
	import {
		loadingType
	} from '@/utils/type';
	const dropItem2List = [{
		value: 0,
		label: '默认排序'
	}, {
		value: 'juli',
		label: '附近优先'
	}, {
		value: 'spots',
		label: '现货优先'
	}, {
		value: 'sale',
		label: '销量优先'
	}]
	const dropItem1List = [{
		value: 0,
		label: '全部'
	}]

	const nameMap = {
		'0': 'province_id',
		'1': 'city_id',
		'2': 'county_id',
		'3': 'township_id',
		'4': 'village_id',
	}
	export default {
		data() {
			return {
				good_id: 0,
				dropItem: {
					item1: {
						list: dropItem1List,
						curr: dropItem1List[0],
					},
					item2: {
						list: dropItem2List,
						curr: dropItem2List[0]
					}
				},
				page: 1,
				agentList: [],
				curr_agent: null,
				status: loadingType.LOADING,
				location: {
					lat: null,
					lng: null,
					cityname: null,
				},
				nearestCityId: null,
				fiveLevelAddress: null,
			};
		},
		onLoad({
			id
		}) {
			this.good_id = id;
			this.resetLocation(() => {
				this.getCountyList();
			});
		},
		onReachBottom() {
			this.loadAgentList()
		},
		methods: {
			checked(item) {
				this.curr_agent = item;
				this.$store.commit('SETAGENTINFO', item)
				uni.navigateBack();
			},
			/**
			 * 重设地址
			 * @param {*} [callback=undefined] 成功回调
			 */
			resetLocation(callback = undefined) {
				let _this = this;
				this.getLocation((data) => {
					_this.location.lat = data.lat;
					_this.location.lng = data.lng;
					_this.location.cityname = data.CityName;
					_this.location.city = data.city;
					_this.clearList()
					_this.loadAgentList(() => {
						if (_this.agentList.length > 0)
							_this.nearestCityId = _this.agentList[0].city
						if (callback) callback();
					});
				});
			},
			/**
			 * 分页加载数据
			 */
			async loadAgentList(callback = null) {
				let address = {};
				if (this.fiveLevelAddress && this.fiveLevelAddress.length > 0) {
					for (let i = 0; i < this.fiveLevelAddress.length; i++) {
						const item = this.fiveLevelAddress[i]
						if (item) {
							address[nameMap[i]] = item.value;
						} else {
							break;
						}
					}
				}
				let params = {
					lat: this.location.lat,
					lng: this.location.lng,
					goods_id: this.good_id,
					order: this.dropItem.item2.curr.value,
					citys_id: this.dropItem.item1.curr.value,
					...address
				};
				let {
					page,
					agentList,
					status
				} = this
				const data = await loadingFun(getAgentList, page, agentList, status, params)
				if (!data) return
				this.page = data.page
				this.agentList = data.dataList
				this.status = data.status
				if (callback) callback();
			},
			getCountyList(callback = null) {
				getCountyList({
					city_id: this.nearestCityId
				}).then(res => {
					if (res.code != 1) return uni.showToast({
						icon: "none",
						title: res.msg
					})
					dropItem1List[0].label = this.location.city;
					this.dropItem.item1.list = [...dropItem1List, ...res.data.map(v => ({
						label: v.city_name + "(" + v.num + ")",
						value: v.id,
					}))]
					if (callback) callback();
				})
			},
			dropdown1Change(e) {
				this.fiveLevelAddress = new Array(5).fill(null);
				this.dropItem.item1.curr = this.dropItem.item1.list.find(v => v.value == e);
				this.clearList()
				this.loadAgentList();
			},
			dropdown2Change(e) {
				this.dropItem.item2.curr = this.dropItem.item2.list.find(v => v.value == e);
				this.clearList()
				this.loadAgentList();
			},
			clearList() {
				this.page = 1
				this.agentList = []
				this.status = loadingType.LOADING
			}
		}
	}
</script>

<style lang="scss">
	.page-center {
		padding: 0 20rpx;
	}

	.list-item {
		padding: 20rpx;
		border-radius: 16rpx;
		--height: 200rpx;
		box-sizing: border-box;
		border: 1px solid white;

		.img {
			width: var(--height);
			height: var(--height);
		}

		.text-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: var(--height);
		}

		&.active {
			border-color: var(--primary-color);
		}
	}
</style>